<template>
    <customNavigationBar title="帮手管理" />

    <view class="selectBar">
        <view class="select">
            <view class="selectOption">
                <view v-for="(item, index) in selectTypeList" :key="item" class="item" :class="index == selectedType && 'active'" @click="changeSortType(index)">
                    {{ item }}
                </view>
            </view>

            <view class="filterBox" @click="filterShow = !filterShow">
                <image src="/static/common/icon_filter.png"></image>
                <view>筛选</view>
            </view>
        </view>

        <view class="selectBox">
            <view class="mask" v-if="filterShow" @click="filterShow = !filterShow"></view>

            <view class="box" :class="filterShow && 'show'">
                <view class="item">
                    <view class="t">专业技能</view>
                    <view class="input">
                        <input type="text" v-model="filterParams.skill" />
                    </view>
                </view>

                <view class="item">
                    <view class="t">帮手性别</view>
                    <view class="input">
                        <uni-data-select v-model="filterParams.sex" :localdata="sexList" placeholder="请选择性别" />
                    </view>
                </view>

                <view class="buttons">
                    <view @click="changeSortType(null)">重置</view>
                    <view @click="filterSubmit">确定</view>
                </view>
            </view>
        </view>
    </view>

    <view class="page">
        <view class="HelperItem" v-for="(item, index) in BSList.records" :key="item.userId">
            <view class="infomation">
                <view class="avatar">
                    <image src="/static/home/card_icon4.png" mode="aspectFill"></image>
                </view>

                <view class="info">
                    <view class="text">
                        <span>帮手昵称:{{ item.userName }}</span>
                        <span>专业技能:{{ item.skills }}</span>
                    </view>
                    <view class="text">
                        <span>帮手电话:{{ item.phone }}</span>
                    </view>
                </view>
            </view>

            <view class="statusBox">
                <span class="text blue">{{ statusText[item.workStatus] }}</span>

                <navigator hover-class="none" class="goInfo" :url="'/pages_home/helperDetail/helperDetail?id=' + item.userId">帮手详情</navigator>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';
import { homeApis } from '@/utils/apis';
const selectedType = ref(0);
const selectTypeList = ref(['全部帮手', '空闲中', '已下线']);
const statusText = ref(['下线中', '上线中', '接单中']);
const sexList = ref([
    { value: 1, text: '男' },
    { value: 2, text: '女' }
]);
const filterShow = ref(false);
const filterParams = ref<any>({
    skill: '',
    sex: ''
});

const pageParams = ref({
    current: 1,
    size: 20
});

onLoad(() => {
    getList();
});
onReachBottom(() => {
    if (pageParams.value.current < BSList.value.pages) {
        pageParams.value.current++;
        getList();
    }
});

const BSList = ref({});
const getList = async () => {
    let res = await homeApis.getBSList({ ...pageParams.value, ...filterParams.value });

    if (res.data.current == 1) {
        BSList.value = res.data;
    } else {
        if (BSList.value.current != res.data.current) {
            let records = [...BSList.value.records, ...res.data.records];
            BSList.value = { ...res.data, records };
        }
    }
};

const filterSubmit = () => {
    pageParams.value = {
        current: 1,
        size: 20
    };
    filterShow.value = false;
    getList();
};

const changeSortType = (index = null) => {
    if (index != null) {
        if (index === selectedType.value) return;

        if (index === 0) {
            filterParams.value = {
                skill: filterParams.value.skill,
                sex: filterParams.value.sex
            };
        } else if (index === 1) {
            filterParams.value = {
                ...filterParams.value,
                status: 1
            };
        } else {
            filterParams.value = {
                ...filterParams.value,
                status: 0
            };
        }
    } else {
        if (index === 0) {
            filterParams.value = {
                skill: '',
                sex: ''
            };
        } else if (index === 1) {
            filterParams.value = {
                skill: '',
                sex: '',
                status: 1
            };
        } else {
            filterParams.value = {
                skill: '',
                sex: '',
                status: 0
            };
        }
    }
    selectedType.value = index == null ? selectedType.value : index;
    pageParams.value = {
        current: 1,
        size: 20
    };
    filterShow.value = false;

    getList();
};
</script>
<style>
page {
    background: #f2f3f5;
}
</style>
<style lang="scss" scoped>
.selectBar {
    width: 100%;
    position: sticky;
    top: calc(88rpx + var(--status-bar-height));
    z-index: 5;

    .select {
        position: relative;
        z-index: 5;
        height: 80rpx;
        padding: 0 24rpx;
        padding-bottom: 32rpx;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        .selectOption {
            display: flex;
            align-items: center;
            gap: 56rpx;

            .item {
                position: relative;
                font-size: 28rpx;
                color: #999999;

                &.active {
                    font-size: 28rpx;
                    color: #333333;
                }

                &.active::after {
                    content: '';
                    position: absolute;
                    bottom: -12rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 48rpx;
                    height: 8rpx;
                    background: #2c72ff;
                    border-radius: 4rpx 4rpx 4rpx 4rpx;
                }
            }
        }
        .filterBox {
            display: flex;
            align-items: center;
            gap: 10rpx;
            image {
                width: 24rpx;
                height: 24rpx;
            }
            view {
                font-size: 24rpx;
                color: #333333;
            }
        }
    }
    .selectBox {
        position: fixed;
        z-index: 3;
        top: calc(var(--status-bar-height) + 88rpx + 80rpx);
        left: 0;
        width: 100%;

        .mask {
            position: absolute;
            z-index: 3;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(51, 51, 51, 0.2);
        }

        .box {
            position: absolute;
            top: 0;
            transform: translateY(-100%);
            left: 0;
            z-index: 6;
            width: 100%;
            background: #ffffff;
            border-radius: 0rpx 0rpx 24rpx 24rpx;
            transition: 0.3s;
            padding: 24rpx;

            .item {
                margin-bottom: 28rpx;
                .t {
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 40rpx;
                }
                .input {
                    margin-top: 16rpx;
                    padding: 0 36rpx;
                    width: 100%;
                    height: 88rpx;
                    background: #f2f3f5;
                    border-radius: 8rpx;
                    input {
                        width: 100%;
                        height: 88rpx;
                        line-height: 88rpx;
                        background: #f2f3f5;
                        border-radius: 8rpx;

                        font-size: 28rpx;
                        color: #333333;
                    }
                }
            }
            .buttons {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 46rpx;
                margin-top: 48rpx;

                view {
                    flex: 1;
                    height: 64rpx;
                    background: #e4e4e6;
                    border-radius: 44rpx;
                    font-size: 28rpx;
                    color: #000000;
                    line-height: 64rpx;
                    text-align: center;

                    &:last-child {
                        background: #2c72ff;
                        color: #ffffff;
                    }
                }
            }

            &.show {
                transform: translateY(0);
            }
        }
    }
}

.page {
    padding: 24rpx;

    .HelperItem {
        margin-bottom: 20rpx;
        padding: 24rpx;
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx;
        .infomation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20rpx;

            .avatar {
                width: 110rpx;
                height: 110rpx;
                background: #999999;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                overflow: hidden;
                image {
                    width: 110rpx;
                    height: 110rpx;
                }
            }
            .info {
                flex: 1;
                .text {
                    display: flex;
                    gap: 10rpx;
                    margin-bottom: 42rpx;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    span {
                        display: block;
                        flex: 1;
                        font-weight: 400;
                        font-size: 20rpx;
                        color: #000000;
                        text-align: left;
                    }
                    span:first-child {
                        flex: 0.8;
                    }
                }
            }
        }
        .statusBox {
            display: flex;
            justify-content: space-between;
            margin-top: 34rpx;
            align-items: center;

            .text {
                font-size: 28rpx;
                &.orange {
                    color: #ff6543;
                }
                &.blue {
                    color: #2c72ff;
                }
                &.green {
                    color: #16cc93;
                }
            }
            .goInfo {
                width: 192rpx;
                height: 60rpx;
                background: #2c72ff;
                border-radius: 30rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #ffffff;
                line-height: 60rpx;
                text-align: center;
            }
        }
    }
}

::v-deep .uni-stat__select {
    height: 100%;
    .uni-stat-box {
        background-color: transparent;
    }
    .uni-select {
        height: 100%;
        border: none;
    }
    .uni-select__input-box {
        height: 100%;
    }

    .uni-select__input-placeholder {
        font-size: 28rpx;
        color: #333333;
    }
}
</style>
